<script setup lang="ts">
import {getCartListFn,SeleAllFn, updateCartNumFn,DelCartDataFn,SeleCartDataFn} from '@/api/cart'
import { useUserstore } from '@/stores/user';
import {ref, onMounted,computed} from 'vue'
import type { Ref } from 'vue';
import type { iCart } from '@/type/cart';
import { showToast ,showConfirmDialog, } from 'vant';
const user=useUserstore()

// 获取购物车数据
const ProList:Ref<iCart[]> =ref([])
function getCartListData(){
  getCartListFn({
    userid:user.userid
  }).then(res=>{
    console.log('购物车数据',res.data.data);
    ProList.value=res.data.data
    //验证是否全选
    isSelectAll()
  })
}

onMounted(()=>{
  getCartListData()
})

//修改购物车商品数目
function calc(cartid:string,num:number){
  updateCartNumFn({
    cartid,
    num,
  }).then(res=>{
    if(res.data.code==200){     
      getCartListFn({
    userid:user.userid
  }).then(res=>{
    console.log('购物车数据',res.data.data);
    ProList.value=res.data.data
  })
    }
    
  })
}

//删除单条数据
function Del(cartid:string){
  showConfirmDialog({
  title: '温馨提示',
  message:
    '你确认要删除这一商品吗？',
})
  .then(() => {
    DelCartDataFn({cartid}).then(res=>{
    if(res.data.code==200){
      showToast('该商品已删除')
      getCartListData()
    }
  })
  })
  .catch(() => {
  });
}

//选择商品
function changeCheckbox(cart:iCart){
  SeleCartDataFn({
    cartid:cart.cartid,
    flag:cart.flag
  }).then(res=>{
    if(res.data.code==200){
      getCartListData()
    }
  })
}

//全选
const isAll:Ref<boolean> =ref(false)

//验证是否为全选
function isSelectAll(){
  if(!ProList.value){
    return
  } else{
    for(let i=0; i<ProList.value.length;i++){
    const item=ProList.value[i];
    if(!item.flag){
      isAll.value=false
      return
    }
    }
    //for循环执行完毕后仍然没有未选中即全选
    isAll.value=true
  }
}


//点击全选和取消全选
function SelectAll(){
  SeleAllFn({
    userid:user.userid,
    type:isAll.value
  }).then(res=>{
    if(res.data.code==200){
      getCartListData()
    }  
  })
}


//计算总价
const total= computed(()=>{
  let num=0
  if(ProList.value){
    ProList.value.forEach(item=>{
    if(item.flag){
      num+=item.originprice*item.discount/10*item.num
    }
  })
  }
  return num  
})


</script>

<template>
  <main class="box">
    <!-- 头部 -->
    <header class="header">
      <slot name="left"></slot>
      购物车
      <slot name="right"></slot>
     </header>


     <!-- 内容 -->
    <div class="content">
      <!-- 商品渲染 -->
     <van-swipe-cell v-for="item in ProList" :key="item.cartid">
      <van-card :price="item.originprice*item.discount/10" :title="item.proname" class="goods-card" :thumb="item.img1">
        
        <!-- 自定义图片 -->
        <template #thumb>
          <div class="img">
            <van-checkbox @change="changeCheckbox(item)" v-model="item.flag" shape="square" icon-size="15"></van-checkbox>
            <van-image width="75px" height='75px' :src="item.img1"></van-image>
          </div>
          
        </template>

        <!-- 自定义数量 -->
        <template #num>
          <div class="num">
            <van-button :disabled="!(item.num-1)" @click="calc(item.cartid,--item.num)" size="mini">&nbsp;-&nbsp;</van-button>
              <span>{{ item.num }}</span>
            <van-button @click="calc(item.cartid,++item.num)"  size="mini">&nbsp;+&nbsp;</van-button>
          </div>
        </template>
       
      </van-card>
      <!-- 删除按钮 -->
        <template #right>
          <van-button @click="Del(item.cartid)" square text="删除" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>

      <div class="bottom">

      </div>
      
      <!-- 提交订单 -->
      <van-submit-bar :price="total*100" button-text="提交订单">
        <van-checkbox @click="SelectAll" v-model="isAll" shape="square" >全选</van-checkbox>
        <template #tip>
          你的收货地址不支持配送, <span>修改地址</span>
        </template>
      </van-submit-bar>
    </div>
  </main>
</template>

<style scoped lang="scss">
  .goods-card {
    margin: 0;
    background-color: white;
    border-bottom: 1px solid #ccc;
  }

  .delete-button {
    height: 100%;
  }
  .num{
    line-height: 20px;
    display: flex;
    span{
      display: block;
      line-height: 24px;
      margin: 0 10px;
    }
  }
    
  .img{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .van-checkbox{
      margin-left: -8px;
    }
  }

  .van-submit-bar{
    bottom:50px
  }

  .bottom{
    width: 100%;
    height: 80px;
  }
</style>